<template>
  <view class="content">
    <!--用户信息-->
    <view class="px-20 flex" style="padding-top: 150rpx">
      <up-avatar text="北" fontSize="18" randomBgColor size="55"></up-avatar>
      <view style="flex:1" class="ml-20">
        <view class="f-c-f fw-600 f-s-lx">张三</view>
        <view class="f-c-f mt-10 f-s-m">1-3年 | 本科 | 24岁</view>
      </view>
      <view class="exchange-btn">
        <image src="/static/icon/invite/exchange.png" style="width: 25rpx;height: 30rpx" mode="aspectFill"/>
        <view class="ml-10 f-s-m">切换身份</view>
      </view>
    </view>

    <!--数据统计-->
    <user-data-card/>
    <!-- 简历卡片-->
    <user-resume-card/>
    <!--用户信息操作组-->
    <user-menu-group :data="userMenuGroup"/>
    <!--系统操作组-->
    <user-menu-group :data="userSettingGroup"/>
  </view>
  <at-tabbar/>
</template>

<script setup>
import UserDataCard from "@/user/components/user-data-card.vue";
import UserResumeCard from "@/user/components/user-resume-card.vue";
import UserMenuGroup from "@/user/components/user-menu-group.vue";
import {userMenuGroup, userSettingGroup} from "@/pages/config/config";
</script>

<style scoped lang="scss">
.content {
  background: linear-gradient(to bottom, $theme-color 10%, #f5f5f5 100%) fixed;
  background-attachment: fixed;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

.exchange-btn {
  background: #fff;
  color: #ff9500;
  border-radius: 100rpx;
  padding: 8rpx 20rpx;
  display: flex;
  align-items: center;
}
</style>
